<template>
	<view class="diy-option" :style="{
		background: itemData.style.background,
	 		paddingLeft: itemData.style.paddingLeft*2 + 'rpx',
	 		paddingRight: itemData.style.paddingLeft*2 + 'rpx',
	 		paddingTop: itemData.style.paddingTop*2 + 'rpx',
	 		paddingBottom: itemData.style.paddingBottom*2 + 'rpx',
	 		marginTop:itemData.style.marginTop*2 + 'rpx',
	 		
	 	}">
		<view class="o-h"
			:style="{borderTopLeftRadius: itemData.style.topRadio*2 + 'rpx',
			borderTopRightRadius: itemData.style.topRadio*2 + 'rpx',
			borderBottomLeftRadius: itemData.style.bottomRadio*2 + 'rpx',
			borderBottomRightRadius: itemData.style.bottomRadio*2 + 'rpx',backgroundImage: `linear-gradient(to right,${itemData.style.bgcolor_color1 || '#fff'} , ${itemData.style.bgcolor_color2 || '#fff'})`}">
			<navBar :optionType="`${itemData.params.type || 1}`" class="ww100" :activeText="itemData.style.activeText"
				:activeColorF="itemData.style.active_color1" :activeColorS="itemData.style.active_color2"
				defaultColor="#333333" @currentIndex="setIndex" :currentI="thisindex" :navList="itemData.data">
			</navBar>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				thisindex: 0,
			};
		},
		props: ['itemData'],
		created() {
			if (this.itemData.data && this.itemData.data[0].text !== '首页') {
				this.itemData.data = [{
					text: '首页'
				}, ...this.itemData.data];
			}
		},
		methods: {
			//点击nav控制下面的展示
			setIndex(e) {
				console.log(this.itemData.data[e], 'eeeee');
				this.thisindex = e;
				this.category_id = this.itemData.data[e] && this.itemData.data[e].category_id || '';
				this.$emit('setIndex', this.thisindex, this.category_id);
			},
		}
	};
</script>

<style lang="scss" scoped>
</style>